<template>
  <el-card>
    <!-- table主体 -->
    <el-table v-bind="$attrs" :data="tableData" style="width: 100%">
      <el-table-column v-if="columnType" :type="columnType" width="55">
        <template v-if="columnType === 'expand'" #default="scope">
          <slot name="expand" :row="scope.row" :index="scope.$index" />
        </template>
      </el-table-column>
      <el-table-column
        v-for="column in columns"
        v-bind="column"
        :key="column.prop"
      >
        <template v-if="column.slot" #default="scope">
          <slot
            :name="column.slotName"
            :row="scope.row"
            :index="scope.$index"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="pagination" class="pagination-wrapper">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50]"
        :total="paginationConfig.total"
        v-model:page-size="paginationData.pageSize"
        v-model:currentPage="paginationData.currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";

// 引入封装的axios请求
// import { request } from "@/utils/service"

const props = withDefaults(
  defineProps<{
    columns: Array<any>;
    pagination: boolean;
    selection: boolean;
    columnType: string;
    requestConfig: any;
  }>(),
  {
    columns: () => [],
    customConfig: {
      showPagination: true,
    },
    pagination: false,
    selection: false,
    columnType: "",
    requestConfig: {
      url: "",
      type: "",
      response: "",
    },
  },
);

const tableData = ref();
const paginationConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});

onMounted(() => {
  getTableData();
});

const paginationData = reactive({
  currentPage: paginationConfig.value.currentPage,
  pageSize: paginationConfig.value.pageSize,
});

const handleCurrentChange = (currentPage: number) => {
  paginationData.currentPage = currentPage;
  getTableData();
};

const handleSizeChange = (pageSize: number) => {
  paginationData.pageSize = pageSize;
};
/**获取表格数据 */
const getTableData = () => {
  // 模拟测试数据
  fetch("https://siteapi.xiaonuo.vip/client/doc/tree?_=1735193323829", {
    headers: {
      accept: "application/json, text/plain, */*",
      "accept-language": "zh-CN,zh;q=0.9",
      priority: "u=1, i",
      "sec-ch-ua":
        '"Chromium";v="128", "Not;A=Brand";v="24", "Google Chrome";v="128"',
      "sec-ch-ua-mobile": "?0",
      "sec-ch-ua-platform": '"Windows"',
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "same-site",
    },
    referrer: "https://xiaonuo.vip/",
    referrerPolicy: "strict-origin-when-cross-origin",
    body: null,
    method: "GET",
    mode: "cors",
    credentials: "omit",
  })
    .then((response) => response.json())
    .then((data) => {
      tableData.value = data.data;
      paginationConfig.value.total = 32;
    })
    .catch((error) => console.error("Error:", error));

  // 配置传入的 url地址 / 请求类型 / 传参
  // let params = JSON.parse(props.requestConfig.response);
  // request({
  //   url: props.requestConfig.url,
  //   method: props.requestConfig.type,
  //   params,
  // }).then((res: any) => {
  //   tableData.value = res.data;
  //   paginationConfig.value.total = res.total;
  // });
};
</script>

<style lang="scss" scoped>
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
